<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddMarkerWave.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_WAVE_LAYER).addTo(map);

      //composite symbol, the latter is on the top
      let marker = new maptalks.Marker(
          map.getCenter(),
          {
            "symbol": [
              {
                "markerType": "ellipse",
                "markerFill": "#f00",
                "markerFillOpacity": 0.9,
                "markerWidth": 20,
                "markerHeight": 20,
                "markerLineWidth": 0
              },
              {
                "markerType": "ellipse",
                "markerFill": "#ff851b",
                "markerFillOpacity": 0.7,
                "markerWidth": 55,
                "markerHeight": 55,
                "markerLineWidth": 0
              },
              {
                "markerType": "ellipse",
                "markerFill": "#16e82a",
                "markerFillOpacity": 0.5,
                "markerWidth": 91,
                "markerHeight": 91,
                "markerLineWidth": 0
              },
              {
                "markerType": "ellipse",
                "markerFill": "#123edc",
                "markerFillOpacity": 0.3,
                "markerWidth": 130,
                "markerHeight": 130,
                "markerLineWidth": 0
              },
              {
                "markerType": "ellipse",
                "markerFill": "#8c14cd",
                "markerFillOpacity": 0.2,
                "markerWidth": 172,
                "markerHeight": 172,
                "markerLineWidth": 0
              }
            ]
          }
      ).addTo(layer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
